{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}Support Staff Dashboard — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
  <div>
    <h4 class="fw-bold mb-1">Support Staff Dashboard</h4>
    <p class="text-muted small mb-0">Help students with tickets, schedules, and proctoring. Fees are handled by Accounts Staff.</p>
  </div>
  <div class="d-flex gap-2">
    <a href="{% url 'support:ticket_list' %}" class="btn btn-primary btn-sm">
      <i class="bi bi-life-preserver me-1"></i>Tickets
    </a>
    <a href="{% url 'certifications:admin_schedules' %}" class="btn btn-outline-primary btn-sm">
      <i class="bi bi-calendar-week me-1"></i>Schedules
    </a>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm rounded-4 p-3">
      <div class="fw-bold fs-3 text-danger">{{ open_tickets }}</div>
      <div class="text-muted small">Open tickets</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm rounded-4 p-3">
      <div class="fw-bold fs-3 text-primary">{{ in_progress_tickets }}</div>
      <div class="text-muted small">In progress tickets</div>
    </div>
  </div>
</div>

<div class="card border-0 shadow-sm rounded-4">
  <div class="card-body p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="fw-bold mb-0">Recent tickets</h6>
      <a href="{% url 'support:ticket_list' %}" class="small">View all</a>
    </div>
    {% for t in recent_tickets %}
      <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
        <div>
          <div class="fw-semibold small">{{ t.subject }}</div>
          <div class="text-muted" style="font-size:.75rem;">{{ t.created_by.get_display_name }} · {{ t.get_status_display }}</div>
        </div>
        <a href="{% url 'support:ticket_detail' t.pk %}" class="btn btn-sm btn-outline-primary">Open</a>
      </div>
    {% empty %}
      <p class="text-muted small mb-0">No recent tickets.</p>
    {% endfor %}
  </div>
</div>
{% endblock %}